<template lang="">
    <div>
        <el-table :data="tableData" style="width: 100%" ref="table" @selection-change="select">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column prop="stuNum" label="学生学号">
            </el-table-column>
            <el-table-column prop="stuName" label="学生姓名">
            </el-table-column>
            <el-table-column prop="stuProfessional" label="所在专业">
            </el-table-column>
            <el-table-column prop="stuClass" label="所在班级">
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="260">
                <template slot-scope="scope">
                    <!-- <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">查看  <--能传两个参数 -->
                    <!-- <el-button size="mini" type="primary" @click="handleEdit(scope.row.stuNum)">查看
                    </el-button> -->
                    <el-button size="mini" @click="resetPassword(scope.row.stuNum)">重置密码
                    </el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.id,scope.row.stuNum)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    export default {
        name: 'ManageTable',
        data() {
            return {
                searching:false,
                tableData: [
                    /* {
                        "id": 1,
                        "stuNum": 2001101,
                        "stuName": "张三",
                        "stuClass": "20计科2班",
                        'stuProfessional':'计科'
                    },
                    {
                        "id": 2,
                        "stuNum": 200010,
                        "stuName": "王二",
                        "stuClass": "20网工1班",
                        stuProfessional:'网工'
                    },
                    {
                        "id": 3,
                        "stuNum": 200100,
                        "stuName": "李四",
                        "stuClass": "20计科5班",
                        stuProfessional:'计科'
                    },
                    {
                        "id": 5,
                        "stuNum": 393945,
                        "stuName": "易飞捷",
                        "stuClass": "飞行器动力工程",
                        stuProfessional:'不知道'
                    }, */
                ],
                index: 1,
                page: 1,
            }
        },
        methods: {
            tableRowClassName({ row, rowIndex }) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            emitServer(page) {
                console.log('ManageTable组件的emitServer收到', page);
                let aimPage
                if (page == -1) {
                    aimPage = this.page
                } else {
                    aimPage = page
                }

                axios({
                    method: 'GET',
                    url: `/student/list/${aimPage}/12`,
                    withCredentials: true,
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    console.log('拉取学生列表成功', result.data);
                    this.tableData = result.data.data.list
                    this.$bus.$emit('totalPage', result.data.data.total)  //告知页码组件全部有多少条数
                }).catch((err) => {
                    this.$message('拉取学生列表失败' + err.message)
                });
            },
            handleEdit(conId) {
                /*                 this.$router.push({
                                    name: 'edit',
                                    query: {
                                        conId
                                    }
                                }) */
            },
            handleDelete(id,stuNum) {
                console.log('删除id', id);
                axios({
                    method: 'DELETE',
                    url: `/student/delete/${id}`,
                    withCredentials: true,
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    this.$message({
                        message: `已删除学号为:${stuNum}的学生`,
                        type: 'success'
                    });

                    this.emitServer(-1)
                }).catch((err) => {
                    this.$message({
                        message: '删除失败' + err.message,
                        type: 'info'
                    });
                });
            },
            select(selection) {
                let selectedId = []
                for (let i = 0; i < selection.length; i++) {
                    selectedId.push(selection[i].id)
                }
                console.log(selectedId);
                this.$bus.$emit('select', selectedId)
            },
            resetPassword(id) {
                axios({
                    method: 'PUT',
                    url: `/student/pwdReset/${id}`,
                    withCredentials: true,
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    this.$message({
                        message: '重置成功',
                        type: 'success'
                    })
                    if(this.searching){
                        this.$bus.$emit('toSearch')
                    }else {
                        this.emitServer(1)
                    }
                }).catch((err) => {
                    this.$message({
                        message: err.message,
                        type: 'info'
                    })
                });
            }
        },
        mounted() {
            this.$bus.$on('pageChange', (val) => {
                this.emitServer(val)
            })
            this.$bus.$on('clearSearch', () => {
                this.emitServer(1)
                this.searching = false
            })
            this.$bus.$on('sthSuccess', () => {
                this.emitServer(1)
            })
            this.$bus.$on('search', (obj) => {
                if (Array.isArray(obj)) {
                    this.tableData = obj
                } else {
                    this.tableData = [
                        { ...obj }
                    ]
                }
                this.searching = true
            })
            this.emitServer(1)
        },
        beforeDestroy() {
            this.$bus.$off('pageChange')
            this.$bus.$off('clearSearch')
            this.$bus.$off('sthSuccess')
            this.$bus.$off('search')
        },
    }
</script>
<style lang="">

</style>